<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" class="form" :inline="true" size="mini">
        <el-form-item label="用户ID/昵称:" class="name">
          <el-input
            v-model.number="input"
            style="width: 200px"
            clearable
            @change="getPBDuser()"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期:">
          <el-col :span="12">
            <el-date-picker
              v-model="time"
              type="daterange"
              align="right"
              unlink-panels
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              :picker-options="pickerOptions"
              @change="search"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <div class="buttonL">
          <el-button type="primary" size="small" @click="query">查询</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <span>推广人数量：{{ tableData.length }}</span>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <span>订单量：{{ goodsNum }}</span>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <span>消费总额：{{ Totalconsumption }}元</span>
        </div></el-col
      >
    </el-row>
    <el-card>
      <el-table border :data="tableData" row-key="id">
        <el-table-column sortable label="用户ID" prop="id" align="center" />
        <el-table-column sortable label="用户昵称" prop="name" align="center" />
        <el-table-column
          sortable
          label="联系电话"
          prop="phone"
          align="center"
        />
        <el-table-column
          sortable
          label="商业店铺数量"
          prop="storequantity"
          align="center"
        />
        <el-table-column
          sortable
          label="订单量"
          prop="quantity"
          align="center"
        />
        <el-table-column sortable label="消费额" prop="money" align="center" />
        <el-table-column
          sortable
          label="消费频次"
          prop="frequency"
          align="center"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="
                $router.push({
                  path: '/Consumption',
                  name: 'Consumption',
                  query: { id: row.id },
                  params: { name: row.name, phone: row.phone },
                })
              "
              >消费分析</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="[2, 3, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { getPBDuser, searchPBDuser } from '@/api/userPBD.js'
import { queryFn } from '@/utils'
export default {
  computed: {
    goodsNum () {
      let sum = 0
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].quantity
      }
      return sum
    },
    Totalconsumption () {
      let sum = 0
      for (let i = 0; i < this.tableData.length; i++) {
        sum += parseFloat(this.tableData[i].money)
      }
      return sum
    }
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      // 翻页
      currentPage: 1,
      page: {
        page: 1,
        size: 10,
        total: 7
      },
      // 查询数据
      time: '',
      form: {
        time_gte: '',
        time_lte: ''
      },
      input: null,
      // timeList: [],
      // 时间切换数据
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    // isDuringDate (beginDateStr, endDateStr) {
    //   // var curDate = new Date(this.tableData[0].time)
    //   const timeList = []
    //   const beginDate = new Date(beginDateStr)
    //   const endDate = new Date(endDateStr)
    //   for (let i = 0; i < this.tableData.length; i++) {
    //     if (new Date(this.tableData[i].time) >= beginDate && new Date(this.tableData[i].time) <= endDate) {
    //       timeList.push(this.tableData[i].time)
    //     }
    //   }
    //   console.log(timeList)
    // },
    // 查询功能
    async query () {
      const obj = queryFn(this.form)
      // console.log(obj)
      if (typeof this.input === 'number') {
        obj.id = this.input
        // console.log(obj)
      } else if (typeof this.input === 'string') {
        obj.name = this.input
        // console.log(obj)
      }
      const { data } = await searchPBDuser(obj)
      console.log(data)
      this.tableData = data
      this.page.total = data.length
    },
    // 日期时间变化时赋值
    search (v) {
      if (!v) return
      this.form.time_gte = v[0]
      this.form.time_lte = v[1]
    },
    // 重置表单
    resetForm () {
      // console.log('重置')
      this.input = null
      this.time = ''
      this.form = {
        time_gte: '',
        time_lte: ''
      }
      this.getPBDuser()
    },
    // 变换页面条数
    handleSizeChange (val) {
      this.page.size = val
      const obj = {
        _limit: this.page.size
      }
      // console.log(obj)
      this.getPBDuser(obj)
    },
    // 翻页
    handleCurrentChange (val) {
      this.page.page = val
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      this.getPBDuser(obj)
    },
    // 获取用户信息及分页信息
    async getPBDuser (obj) {
      const { data } = await getPBDuser(obj)
      // console.log(data)
      this.tableData = data
    }
  },
  created () {
    this.getPBDuser()
  }
}
</script>

<style lang="less" scoped>
.form {
  box-sizing: border-box;
}
.el-row {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.buttonL {
  padding-left: 30px;
  display: inline-block;
}
.el-button + .el-button {
  margin-left: 30px;
}
</style>
